<template>
  <div id="home">
		<vue-particles
			class="particles"
			color="#39AFFD"
			:particleOpacity="0.7"
			:particlesNumber="100"
			shapeType="circle"
			:particleSize="4"
			linesColor="#8DD1FE"
			:linesWidth="1"
			:lineLinked="true"
			:lineOpacity="0.4"
			:linesDistance="150"
			:moveSpeed="3"
			:hoverEffect="true"
			hoverMode="grab"
			:clickEffect="true"
			clickMode="push"
		>
		</vue-particles>
    <el-container class="container">

    	<base-header :activeIndex="activeIndex"></base-header>
		  
		  <router-view class="me-container"/>
		  
			<base-footer v-show="footerShow"></base-footer>
		  
		</el-container>
		
  </div>
  
</template>

<script>
import BaseFooter from '@/components/BaseFooter'
import BaseHeader from '@/views/BaseHeader'
import { love } from '@/utils/mouseLove'

export default {
  name: 'Home',
  data (){
  	return {
  			activeIndex: '/',
  			footerShow:true
  	}
  },
  components:{
  	'base-header':BaseHeader,
  	'base-footer':BaseFooter
  },
	mounted() {
		// 鼠标点击爱心特效
		love()
	},
  beforeRouteEnter (to, from, next){
  	 next(vm => {
    	vm.activeIndex = to.path
  	})
  },
  beforeRouteUpdate (to, from, next) {
	  if(to.path == '/'){
	  	this.footerShow = true
	  }else{
	  	this.footerShow = false
	  }
	  this.activeIndex = to.path
	  next()
	}
}
</script>

<style>

.me-container{
  margin: 100px auto 140px;
}

.particles{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: url("https://vue-particles.netlify.app/static/img/sky.871d198.jpg"); */
	background-size: cover;
	z-index: -1;
}
/* .container{
	background: url("../static/bloom.gif") no-repeat;
	background-size: cover;
} */
</style>
